<template>
  <div class="w-100 h-100 box">
    <div id="sbjcqk" class="h-100"></div>
    <div class="legend h-100">
      <div class="box">
        <div
          class="item"
          v-for="item in dataList"
          :key="item.name"
          :style="{
            background: `url(${item.bg}) no-repeat center center`,
            backgroundSize: 'auto 100%',
          }"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useOptions } from "@/hook/useOptions";
import * as echarts from "echarts";

import bg1 from "@/assets/image/yunxingjiankong/sbjc_1.png";
import bg2 from "@/assets/image/yunxingjiankong/sbjc_2.png";
import bg3 from "@/assets/image/yunxingjiankong/sbjc_3.png";
import bg4 from "@/assets/image/yunxingjiankong/sbjc_4.png";
import bg5 from "@/assets/image/yunxingjiankong/sbjc_5.png";

const bgs = [bg1, bg2, bg3, bg4, bg5]

const dataList = useOptions().deviceList.map((item, index) => ({
    ...item,
    name: item.label,
    bg: bgs[index]
}))

var option = {
  backgroundColor: "transparent",
  tooltip: {
    show: true,
  },
  title: {
    text: "123",
    subtext: "总数(个)",
    x: "center",
    y: "42%",
    textStyle: {
      fontWeight: "normal",
      fontSize: 20,
      color: "#fff",
    },
    subtextStyle: {
      fontSize: 18,
      color: "#fff",
    },
  },
  legend: {
    show: false,
  },
  toolbox: {
    show: false,
  },
  series: {
    name: "",
    type: "pie",
    radius: [60, 68],
    avoidLabelOverlap: false,
    itemStyle: {
      borderRadius: 2,
      shadowBlur: 2,
    },
    label: {
      show: false,
      position: "center",
    },

    labelLine: {
      show: true,
    },
    data: [],
  },
};
let myChart: any;

onMounted(() => {
  myChart = echarts.init(document.getElementById("sbjcqk") as HTMLElement);
  myChart.setOption(option);
});

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.yxjk.sbjcqk;
  } catch (error) {}
  return data;
});

watch(
  () => current.value,
  (val) => {
    if (val) {
      const arr = val;
      const all = arr.reduce((pre: number, cur: number) => pre + cur);
      myChart.setOption({
        title: {
          text: all,
        },
        series: [
          {
            data: val.map((value: any, index: number) => ({
              ...dataList[index],
              value,
              itemStyle: {
                color: dataList[index].color,
              },
            })),
          },
        ],
      });
    }
  }
);
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
#sbjcqk {
  width: 260px;
}
.legend {
  width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  .box {
    width: 100%;
    display: flex;
    align-items: center;
    flex-flow: column wrap;
  }
  .item {
    width: 100%;
    height: 34px;
    margin: 9px 0;
    line-height: 34px;
    padding-left: 80px;
  }
}
</style>
